<!-- 博客的空间动态 -->
<template>
  <div class="space_diary_main">
    <!-- 顶部 -->
    <van-sticky>
      <div class="top_div">
        <div
          :class="['show', current == index ? 'active' : ' ']"
          @click="active(index)"
          v-for="index in ['关注', '推荐']"
          :key="index"
        >
          {{ index }}
        </div>
      </div>
    </van-sticky>
    <!-- 底部 -->
    <van-tabbar v-model="footActive">
      <van-tabbar-item icon="home-o" @click="toMainPage">主页</van-tabbar-item>
      <van-tabbar-item icon="friends-o" @click="toMyCenter">
        我的
      </van-tabbar-item>
    </van-tabbar>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      footActive: 0, // 底部我的和主页切换的状态
      current: '推荐',
    }
  },
  created(){
    this.$router.push('/blog/blogSpace')
  },
  methods: {
    // 点击更换关注和推荐
    active(index) {
      this.current = index
      // console.log(this.current)
      if (this.current === '关注') {
        this.$router.push('/blog/blogSpace/blogConcern')
      } else {
        this.$router.push('/blog/blogSpace')
      }
    },

    // 主页
    toMainPage(){
      this.$router.push("/"); 
    },

    // 去我的页面
    toMyCenter(){
      this.$router.push("/personalCenter");
    },
  },
}
</script>

<style lang="scss" scoped>
.space_diary_main {
  width: 100%;
}
.top_div {
  display: flex;
  background-color: rgb(224, 235, 237);
  width: 100%;
  height: 30px;
  justify-content: space-around;
  padding-top: 30px;
  color: #606266;
}
.active {
  border-bottom: 4px solid rgb(207, 105, 105);
}
</style>
